<template>
    <view class="record-item">
        <view class="record-time">{{ recordItem.createTime }}</view>
        <view class="record-state">
            <view class="state-cotnent">
                <text class="iconfont red" v-if="recordItem.status === 3 || recordItem.status === 1">&#xe6cf;</text>
                <text class="iconfont" v-if="recordItem.status === 2 || recordItem.status === 4 || recordItem.status === 0">&#xe6cf;</text>
                <view v-if="recordItem.status === 0">
                    提现审核中
                </view>
                <view v-if="recordItem.status === 1">
                    审核成功，等待打款
                </view>
                <view v-if="recordItem.status === 2" class="err">
                    审核失败
                    <view class="msg">
                        {{ recordItem.reason }}
                    </view>
                </view>
                <view v-if="recordItem.status === 4" class="err">
                    <view>
                        提现失败
                    </view>
                    <view class="msg">
                        {{ recordItem.reason }}
                    </view>
                </view>
                <view v-if="recordItem.status === 3" class="err">
                    <view>
                        已提现
                    </view>
                    <view class="msg">交易号：{{ recordItem.tradeNo.substring(15, recordItem.tradeNo.length) }}</view>
                </view>
            </view>
            <view class="price">¥{{ recordItem.amount }}</view>
        </view>
    </view>
</template>

<script>
	export default {
		name: 'RecordItem',
        props: {
			recordItem: {
				type: Object,
                default: () => {
                	return {}
                }
            }
        }
	};
</script>

<style lang="scss" scoped>
    .record-item {
        width: 716rpx;
        height: 180rpx;
        box-sizing: border-box;
        background: $bg-white;
        border-radius: 16rpx;
        margin: 20rpx auto 0;
        padding: 20rpx 18rpx 20rpx 22rpx;
        @include flexBox(space-between, null, column);
        font-size: 28rpx;
        .record-time {
            color: #717076;
            font-size: 28rpx;
        }
        .record-state {
            @include flexBox(space-between, center);
            .state-cotnent {
                @include flexBox(null, center);
                color: $text-black;
                .iconfont {
                    font-size: 56rpx;
                    margin-right: 12rpx;
                    &.red {
                        color: $main-color;
                    }
                }
                .err {
                    @include flexBox(space-between, flex-start, column);
                    text-align: left;
                    .msg {
                        font-size: 24rpx;
                        color: #717076;
                    }
                }
            }
            .price {
                color: $main-color;
                font-size: 32rpx;
                font-weight: 500;
            }
        }
    }
</style>